<script setup lang="ts">
import ToolView from "@/modules/tools/layout/tool-view.vue";
import { onBeforeMount, ref, shallowRef } from "vue";
import type { YesOrNoResult } from "./types.ts";
import { randomInt } from "@/framework/util/numbers.ts";

const result = shallowRef<YesOrNoResult>();
const loading = ref(false);

const getResult = async () => {
  try {
    if (loading.value) {
      return;
    }
    loading.value = true;
    const resp = await native.http.getJson<YesOrNoResult>("https://yesno.wtf/api", { timeout: 10_000 });
    result.value = resp.data;
  } catch (e) {
    result.value = {
      answer: randomInt(0, 100) % 2 === 0 ? "yes" : "no",
    };
  } finally {
    loading.value = false;
  }
};

onBeforeMount(() => {
  getResult();
});
</script>

<template>
  <tool-view title="Yes Or NO" description="选择困难症，点击页面随机刷新">
    <div v-if="result" class="full-view position-relative flex-center" @click="getResult">
      <template v-if="loading">
        <div class="abs-fill flex-center">
          <a-spin spinning size="large" />
        </div>
      </template>
      <template v-else>
        <div v-if="result.image" class="position-absolute w-500 h-500 overflow-hidden pt-10">
          <img :src="result.image" alt="" class="full img-fit-contain" draggable="false" />
        </div>

        <div class="answer">{{ result.answer.toUpperCase() }}</div>
      </template>
    </div>
  </tool-view>
</template>

<style scoped lang="less">
.answer {
  position: relative;
  font-size: 60px;
  font-weight: bold;
  color: rgb(232, 230, 227);
  text-shadow:
    rgba(0, 0, 0, 0.25) 0px 0px 20px,
    rgba(0, 0, 0, 0.5) 0px 2px 2px;
  opacity: 0.8;
}
</style>
